<template>
  <div class="背景">
    <!--页眉-->
    <div class="页眉"></div>
    <!--分栏-->
    <el-row :gutter="16" type="flex" justify="center">
      <!--菜单栏-->
      <el-col :span="4">
        <div class="文本框" style="height: 900px;">
          <el-menu  router>
            <el-menu-item index="/CreationCenter" >
              <div class="文本">
                <i class="el-icon-menu"></i>
                首页
              </div>
            </el-menu-item>
            <el-submenu index="001">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-edit-outline"></i>
                  创作
                </div>
              </template>
              <el-menu-item index="/CreationCenter/SendArticle">发布文章</el-menu-item>
              <el-menu-item index="/CreationCenter/SendVideo">发布视频</el-menu-item>
              <el-menu-item index="/CreationCenter/SendReport">发布研报</el-menu-item>
              <el-menu-item index="/CreationCenter/SendTinyArticle">发布富微条</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/ManageArticle">
              <div class="文本">
                <i class="el-icon-reading"></i>
                作品管理
              </div>
            </el-menu-item>
            <el-submenu index="002">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-view"></i>
                  互动管理
                </div>
              </template>
              <el-menu-item index="/CreationCenter/ManageFollow">关注管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManageComment">评论管理</el-menu-item>
              <el-menu-item index="/CreationCenter/ManagePM">私信管理</el-menu-item>
            </el-submenu>
            <el-submenu index="003">
              <template slot="title">
                <div class="文本">
                  <i class="el-icon-document"></i>
                  数据分析
                </div>
              </template>
              <el-menu-item index="/CreationCenter/DataArticle">作品数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataFans">粉丝数据</el-menu-item>
              <el-menu-item index="/CreationCenter/DataProfit">收益数据</el-menu-item>
            </el-submenu>
            <el-menu-item index="/CreationCenter/Option">
              <div class="文本">
                <i class="el-icon-setting"></i>
                设置
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </el-col>
      <!--正文栏-->
      <el-col :span="14">
        <div class="文本框">
          <!--路由-->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/CreationCenter' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>设置</el-breadcrumb-item>
          </el-breadcrumb>
          <br/>
          <!--设置-->
          <el-tabs v-model="activeName">
            <!--账号设置-->

            <el-tab-pane>
              <span slot="label" class="文本-大">账号设置</span>
              <div class="文本框">
                <!--账号信息-->
                <el-row>
                  <el-col :span="4" class="文本-中">
                    账号信息
                  </el-col>
                  <el-col :span="20">
                    <el-row>
                      <el-col :span="4" class="文本">用户名</el-col>
                      <el-col :span="16" class="文本">{{ nickname }}</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_1 = true, editNicknameArgs.nickname = nickname" style="padding: 0px;">编辑</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="4" class="文本">用户简介</el-col>
                      <el-col :span="16" class="文本">{{ shortIntroduce }}</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_2 = true, editShortIntroduceArgs.shortIntroduce = shortIntroduce" style="padding: 0px;">编辑</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="4"class="文本">用户头像</el-col>
                      <el-col :span="20"><el-avatar :size="100" :src=userAvatar></el-avatar></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="4" class="文本">富吾号类型</el-col>
                      <el-col :span="16" class="文本">个人</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_3 = true" style="padding: 0px;">更改</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="4" class="文本">富吾号ID</el-col>
                      <el-col :span="16" class="文本">{{ userId }}</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_4 = true" style="padding: 0px;">复制</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="4" class="文本">所在地</el-col>
                      <el-col :span="20" class="文本">{{ location }}</el-col>
                    </el-row>
                    <el-divider></el-divider>
                  </el-col>
                </el-row>
                <!--安全中心-->
                <el-row>
                  <el-col :span="4" class="文本-中">
                    安全中心
                  </el-col>
                  <el-col :span="20">
                    <el-row>
                      <el-col :span="4" class="文本">绑定手机</el-col>
                      <el-col :span="16" class="文本">13412358678</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_6 = true" style="padding: 0px;">修改</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                      <el-col :span="20" class="文本">登陆密码</el-col>
                      <el-col :span="4" class="文本 右侧"><el-button type="text" @click="dialog_6 = true" style="padding: 0px;">修改</el-button></el-col>
                    </el-row>
                    <el-divider></el-divider>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <!--功能设置-->
            <el-tab-pane>
              <span slot="label" class="文本-大">功能设置</span>
              <div class="文本框">
                <!--图片优化-->
                <el-row style="padding-bottom: 40px;">
                  <el-col :span="4">
                    <div class="文本-中">
                      图片优化
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="文本">
                      智能优化不清晰的图片
                    </div>
                    <el-switch
                        v-model="optionFlag_1"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="padding-top: 10px;padding-bottom: 10px;">
                    </el-switch>
                  </el-col>
                </el-row>
                <!--图片水印-->
                <el-row style="padding-bottom: 40px;">
                  <el-col :span="4">
                    <div class="文本-中">
                      图片水印
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div class="文本">
                      作品配图自动添加水印
                    </div>
                    <el-switch
                        v-model="optionFlag_2"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="padding-top: 10px;padding-bottom: 10px;">
                    </el-switch>
                  </el-col>
                </el-row>
                <!--内容隐私设置-->
                <el-row style="padding-bottom: 40px;">
                  <el-col :span="4">
                    <div class="文本-中">
                      内容隐私设置
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="文本">
                      草稿保存至云端
                    </div>
                    <el-switch
                        v-model="optionFlag_3"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        style="padding-top: 10px;padding-bottom: 10px;">
                    </el-switch>
                    <div class="文本-小">
                      开启后，你的文章、富微条等将自动同步到云端，你可在不同设备上编辑草稿
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
    </el-row>
    <!--页脚-->
    <div class="页眉"></div>
    <!--各种按钮对应的对话框-->
    <el-dialog
        title="编辑用户名"
        :visible.sync="dialog_1"
        width="30%"
        >
      <el-input
          type="text"
          placeholder=""
          border="0"
          v-model="editNicknameArgs.nickname"
          maxlength="10"
          show-word-limit>
      </el-input>
      <div class="文本-小" style="padding-top: 10px">本月还能编辑用户名1次</div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialog_1 = false">取消</el-button>
      <el-button type="primary" @click="editNickname">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="编辑用户简介"
        :visible.sync="dialog_2"
        width="30%"
        >
      <el-input
          type="textarea"
          :rows="5"
          placeholder=""
          border="0"
          v-model="editShortIntroduceArgs.shortIntroduce"
          maxlength="70"
          show-word-limit>
      </el-input>
      <div class="文本-小" style="padding-top: 10px">本月还能编辑用户简介5次</div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialog_2 = false">取消</el-button>
    <el-button type="primary" @click="editShortIntroduce">保存</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="更改富吾号类型"
        :visible.sync="dialog_3"
        width="30%"
        :before-close="handleClose">
      <div class="文本" style="padding-bottom: 10px">更改类型</div>
      <el-radio v-model="radio" label="001">群媒体</el-radio>
      <el-radio v-model="radio" label="002">新闻媒体</el-radio>
      <el-radio v-model="radio" label="003">国家机构</el-radio>
      <el-radio v-model="radio" label="004">企业</el-radio>
      <el-radio v-model="radio" label="005">其他组织</el-radio>
      <div class="文本" style="padding-top: 30px; padding-bottom: 10px">更改原因</div>
      <el-input
          type="textarea"
          :rows="5"
          placeholder=""
          border="0"
          v-model="reason"
          maxlength="100"
          show-word-limit>
      </el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialog_3 = false">取消</el-button>
    <el-button type="primary" @click="dialog_3 = false">保存</el-button>
  </span>
    </el-dialog>

    <el-dialog
        title="修改邮箱"
        :visible.sync="dialog_6"
        width="30%"
        :before-close="handleClose">
      <el-input
          type="text"
          placeholder=""
          border="0"
          v-model="email"
          show-word-limit>
      </el-input>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialog_6 = false">取消</el-button>
    <el-button type="primary" @click="dialog_6 = false">保存</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<style>
/*输入框样式*/
.el-textarea__inner {
  border-radius: 0px;
  font-size: 16px;
  resize: none;
}
.el-input__inner {
  border-radius: 0px;
  font-size: 16px;
}
</style>

<script>
export default {
  data() {
    return {
      queryByUserId:{
        idUser: window.sessionStorage.getItem("idUser")
      },
      editNicknameArgs:{
        idUser: 0,
        nickname: "",
      },
      editShortIntroduceArgs:{
        idUser: 0,
        shortIntroduce: "",
      },
      activeName: 0,
      /*图片优化默认开关*/
      optionFlag_1: true,
      /*图片水印默认开关*/
      optionFlag_2: true,
      /*内容隐私设置默认开关*/
      optionFlag_3: true,
      /*对话框是否显示*/
      dialog_1: false,
      dialog_2: false,
      dialog_3: false,
      dialog_4: false,
      dialog_5: false,
      dialog_6: false,
      radio: '000',
      /*修改用户签名时输入框中默认文字*/
      user_sign: 'aa',
      /*修改富吾号类型时输入框中默认文字*/
      reason: '',
      /*修改联系邮箱时输入框中默认文字*/
      email: '',
      userAvatar: '',
      nickname: '',
      userId: '',
      shortIntroduce: '',
      location: '',
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    test(){
      console.log(1)
    },
    async getUserInfo() {
      const {data: res} = await this.$http.get('http://39.102.76.217:8082/user/getuserinfo', {
        params:this.queryByUserId
      })
      this.editNicknameArgs.idUser=this.queryByUserId.idUser
      this.editShortIntroduceArgs.idUser=this.queryByUserId.idUser
      this.userAvatar=res.userAvatar
      this.nickname=res.nickname
      this.userId=res.userId
      this.shortIntroduce=res.shortIntroduce
      this.location=res.location
      console.log(res)
    },
    async editNickname() {
      this.dialog_1 = false
      const {data: res} = await this.$http.put("http://39.102.76.217:8082/user/editnickname", this.editNicknameArgs);
      if(res == true) {
        this.nickname = this.editNicknameArgs.nickname
        this.$message({
          message: '修改成功！',
          type: 'success'
        });
      }
      console.log(res)
    },
    async editShortIntroduce() {
      this.dialog_2 = false
      const {data: res} = await this.$http.put('http://39.102.77.65:8081/user/editshortintroduce', this.editShortIntroduceArgs);
      if(res == true) {
        this.shortIntroduce = this.editShortIntroduceArgs.shortIntroduce
        this.$message({
          message: '修改成功！',
          type: 'success'
        });
      }
      console.log(res)
    }
  }
};
</script>
